import { LazyLoadImage } from "react-lazy-load-image-component";
import { Image, Button } from "antd";
import ImageError from "@/assets/images/ImageError.png";
import "react-lazy-load-image-component/src/effects/blur.css";
import { EyeOutlined } from "@ant-design/icons";
import { useState } from "react";
import "./index.less";

const LazyImage = ({ src, width = 100, height = 100, isPreview = true }: any) => {
	const [previewVisible, setPreviewVisible] = useState<boolean>(false);
	return (
		<div
			className="lazy-image-container"
			style={{ width, height }}
			onClick={e => {
				e.stopPropagation(); // 快捷阻止冒泡
			}}
		>
			<LazyLoadImage
				src={src}
				width={width}
				height={height}
				placeholderSrc={ImageError}
				effect="blur" // 加载后的过渡效果（可选）
			/>
			{/* 预览遮罩层 */}
			{isPreview ? (
				<div className="preview-mask" onClick={() => setPreviewVisible(true)}>
					<div className="text-14 f-c-c flex-col" style={{ color: "#fff" }}>
						<EyeOutlined style={{ color: "#fff", fontSize: "16px" }} />
						{width > 80 ? <span>预览</span> : null}
					</div>
				</div>
			) : null}
			{/* 大图预览 */}
			<Image
				style={{ display: "none" }}
				src={src}
				preview={{
					visible: previewVisible,
					onVisibleChange: visible => setPreviewVisible(visible)
				}}
			/>
		</div>
	);
};
export default LazyImage;
